<template>
  <div class="my-options">
    <ul class="items">
      <li class="i-member">
        <router-link tag="span" :to="{ name: 'mimember' }">会员中心</router-link>
      </li>
      <li class="i-wallet">
        <span @click="toMiCoupon">我的优惠</span>
      </li>
      <div class="ui-line"></div>
    </ul>
    <ul class="items">
      <li class="i-service">
        <span @click="toMiServer">服务中心</span>
      </li>
      <li class="i-mihome">
        <span @click="toMiHome">小米之家</span>
      </li>
      <div class="ui-line"></div>
    </ul>
    <ul class="items">
      <li class="i-fcode">
        <span>我的F码</span>
      </li>
      <li class="i-gift">
        <span>礼物码兑换</span>
      </li>
      <div class="ui-line"></div>
    </ul>
    <ul class="items">
      <li class="i-set">
        <span @click="toMiSetting">设置</span>
      </li>
    </ul>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
  name: 'MyOptions',
  computed: mapGetters('user', ['isLogined']),
  methods: {
    toMiCoupon () {
      if (this.isLogined) {
        this.$router.push({ name: 'micoupon' })
      } else {
        this.$router.push({ name: 'login' })
      }
    },
    toMiServer () {
      if (this.isLogined) {
        this.$router.push({ name: 'miserver' })
      } else {
        this.$router.push({ name: 'login' })
      }
    },
    toMiHome () {
      if (this.isLogined) {
        this.$router.push({ name: 'mihome' })
      } else {
        this.$router.push({ name: 'login' })
      }
    },
    toMiSetting () {
      if (this.isLogined) {
        this.$router.push({ name: 'misetting' })
      } else {
        this.$router.push({ name: 'login' })
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.my-options {
  ul{
    .ui-line {
      width: 100%;
      height: 10px;
      background-color: rgb(245, 245, 245);
    }
    li{
      position: relative;
      font-size: 15.5px;
      color: rgba(0,0,0);
      background-size: 0.24rem auto !important;
      background: url('@/assets/set.png') no-repeat 0.16rem;
      line-height: 0;
      list-style: none;
      span {
        display: block;
        padding-right: 0.28rem;
        padding-left: .56rem;
        height: .543rem;
        // display: box;
        display: -webkit-box;
        box-align: center;
        -webkit-box-align: center;
        box-pack: justify;
        -webkit-box-pack: justify;
        color: currentColor;
      }
    }
    li::after {
      content: "";
      position: absolute;
      right: 0.16rem;
      color: rgb(127, 127, 127);
      top: 50%;
      width: 0.1rem;
      height: 0.1rem;
      border-left: 1px solid currentColor;
      border-top: 1px solid currentColor;
      text-decoration: inherit;
      vertical-align: inherit;
      box-sizing: inherit;
      transform: translate3d(0,-50%,0) rotate(135deg);
      -webkit-transform: translate3d(0,-50%,0) rotate(135deg);
    }
    .i-member {
      position: relative;
      background: url('@/assets/下载.png') no-repeat .16rem;
      border-bottom: 1px solid rgba(0,0,0,.15);
    }
    .i-wallet {
      background: url('@/assets/wallet.png') no-repeat .16rem;
    }
    .i-service {
      background: url('@/assets/i-service.png') no-repeat .16rem;
      border-bottom: 1px solid rgba(0,0,0,.15);
    }
    .i-mihome {
      background: url('@/assets/i-mihome.png') no-repeat .16rem;
    }
    .i-fcode {
      background: url('@/assets/i-fcode.png') no-repeat .16rem;
      border-bottom: 1px solid rgba(0,0,0,.15);
    }
    .i-gift {
      background: url('@/assets/i-gift.png') no-repeat .16rem;
    }
    .i-set {
      background: url('@/assets/set.png') no-repeat .16rem;
    }
  }
}
</style>
